/**
 * 核定计算金额的弹框
 * 报销单提交时计算自动核定后的结果
 * 出现在申请管控报销、核销、报销标准、预算结果之前
 */
import React, {Component} from 'react';
import {Button, InputNumber, Modal, Row, Col, Popover} from "antd";
import { deepFullCopy, queryCurrencyPrecision, messages } from "share/common";
import ResizeTable from "components/resize-table";
import expenseReportService from "../expense-report.service";

class ModalCheckAmount extends Component {

  state = {
    loading: false,
    data: deepFullCopy(this.props.data)
  };

  componentWillReceiveProps(nextProps, nextContext) {
    nextProps.visible && this.setState({ data: deepFullCopy(nextProps.data) })
  }

  renderAmountCell = (value, record, index) => {
    if (record.amountEditable) {
      return (
        <InputNumber
          value={Math.abs(value)}
          min={0}
          max={Math.abs(record.originalAmount)}
          precision={queryCurrencyPrecision(record.currencyCode)}
          size="small"
          style={{ width: '100%' }}
          formatter={value => `${record.originalAmount < 0 ? '-' : ''}${value}`}
          parser={value => value.replace(/-/, '')}
          onChange={value => this.handleAmountChange(value, index)}
        />
      )
    } else {
      return <span style={{ color: '$default-color' }}>{this.filterMoney(value, queryCurrencyPrecision(record.currencyCode))}</span>
    }
  };

  renderExplain = value => {
    let ruleDescList = [];
    value && value.map(item => {
      item.ruleDesc && ruleDescList.push(item.ruleDesc);
    });
    if (ruleDescList.length === 0) {
      return '-'
    }
    if (ruleDescList.length === 1) {
      return (
        <Popover content={value[0].ruleDesc}>
          {ruleDescList[0]}
        </Popover>
      )
    }
    return (
      <Row>
        <Col span={18} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {ruleDescList[0]}
        </Col>
        <Col span={6} style={{ textAlign: 'right' }}>
          <Popover content={this.renderRuleDetail(ruleDescList)}>
            <a>{messages('expense-1.key763',{arg1: value.length})/*{arg1}条规则*/}</a>
          </Popover>
        </Col>
      </Row>
    )
  };

  renderRuleDetail = ruleDescList => {
    const indexStyle = {
      display: 'inline-block',
      width: 18,
      height: 18,
      fontSize: 12,
      marginRight: 4,
      textAlign: 'center',
      lineHeight: '18px',
      color: '#fff',
      borderRadius: '50%',
      background: '#b5c0ce'
    };
    return (
      <div>
        {ruleDescList.map((item, index) => (
          <div style={{ marginBottom: index === ruleDescList.length - 1 ? 0 : 8 }}>
            <span style={indexStyle}>{index + 1}</span>{item}
          </div>
        ))}
      </div>
    )
  };

  columns = [{
    dataIndex: 'expenseTypeName',
    title: messages('common.expense.type')/*费用类型*/,
    render: value => <Popover content={value}>{value}</Popover>
  }, {
    dataIndex: 'createdDate',
    title: messages('expense-1.key764')/*发⽣⽇期*/
  }, {
    dataIndex: 'originalAmount',
    title: messages('expense-1.key765')/*原⾦额*/,
    render: (value, record) => this.filterMoney(value, queryCurrencyPrecision(record.currencyCode))
  }, {
    dataIndex: 'reviewedAmount',
    title: messages('expense-1.key766')/*核定⾦额*/,
    render: this.renderAmountCell
  }, {
    dataIndex: 'hitRules',
    title: messages('expense-1.key767')/*核定说明*/,
    width: '35%',
    render: this.renderExplain
  }];

  handleAmountChange = (value, index) => {
    let { data } = this.state
    data[index].reviewedAmount = value;
    this.setState({ data });
  };

  handleOk = () => {
    const { expenseReportOID } = this.props;
    const { data } = this.state;
    this.setState({ loading: true });
    expenseReportService.submitDiscountAmount(expenseReportOID, data)
      .then(() => {
        this.props.onOk();
      })
      .finally(() => {
        this.setState({ loading: false });
      })
  };

  render() {
    const { visible } = this.props;
    const { loading, data } = this.state;
    return (
      <Modal
        visible={visible}
        title={messages('expense-1.key768')/*核定计算⾦额*/}
        width={800}
        footer={[
          <Button onClick={this.props.onCancel}>{messages('common.cancel')/*取消*/}</Button>,
          <Button type="primary" loading={loading} onClick={this.handleOk}>
            {messages('expense-1.key769')/*我知道了，继续提交*/}
          </Button>
        ]}
        onCancel={this.props.onCancel}
      >
        <div>
          <div style={{ marginBottom: 10 }}>
            {messages('expense-1.key770',{arg1: data.length})/*您有 {arg1} 笔费用需核定金额，请查看*/}
          </div>
          <ResizeTable
            rowKey="id"
            columns={this.columns}
            dataSource={data}
            pagination={false}
            size="middle"
            bordered
          />
        </div>
      </Modal>
    );
  }
}

export default ModalCheckAmount;
